<div class="row">
  <div class="col-4 mb-3">
    <a
      class="btn mr-3"
      *ngFor="let nav of navs"
      [routerLink]="nav.url"
      [routerLinkActive]="'btn-primary'"
      [class.btn-secondary]="!router.isActive"
      #router="routerLinkActive"
    >
      {{ nav.title }}
    </a>
  </div>
  <div class="col-3">
    <m-key-search [useRouteQueryParam]="true"></m-key-search>
  </div>
  <div class="col-5 text-right">
    <m-button-icon icon="flaticon-add" color="info" routerLink="/message/web/send">
      站内信
    </m-button-icon>
  </div>
  <div class="col-12" *ngIf="result$ | async as result">
    <m-data-table
      [selection]="selection"
      [data]="result?.list"
      [hideColumn]="hideColumn$ | async"
      [result]="result"
    >
      <ng-container mDataTableColumn header="消息标题">
        <ng-template let-id="id" let-message="message" let-status="status">
          <td *ngIf="message">
            <m-go-detail [use_hacker]="'1'" class="ellipsis" [g_id]="id" [g_name]="message?.title">
              <span [dir]="JSON_stringify({id:id})" [class.bold]="status === WebMessageStatus.Unread">
                {{ message?.title }}
              </span>
            </m-go-detail>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="消息简介">
        <ng-template let-message="message">
          <td class="content-td">
            <div class="ellipsis" [title]="message?.text">{{ message?.text }}</div>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="from" header="发送人">
        <ng-template let-message="message">
          <td>{{ message?.sender?.full_name }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="to" header="接收人">
        <ng-template let-to="to">
          <td class="admins">
            <ng-container *ngFor="let message_to of to">
              <span *ngIf="message_to.receiver">{{ message_to?.receiver?.full_name }}</span>
            </ng-container>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="send_time" header="发送时间">
        <ng-template let-time="created_at">
          <td>{{ time | date }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="recv_time" header="接收时间">
        <ng-template let-time="updated_at">
          <td>{{ time | date }}</td>
        </ng-template>
      </ng-container>
      <m-pagination [length]="result.total" [pageSize]="result.pageSize">
        <ng-container
          *ngIf="
            (status$ | async) !== WebMessageStatus.Sent &&
            (status$ | async) !== WebMessageStatus.Read
          "
        >
          <button class="btn btn-sm btn-secondary mr-3" (click)="select(result.list)">全选</button>
          <button class="btn btn-sm btn-secondary mr-3" (click)="markRead(false)">标记已读</button>
          <button class="btn btn-sm btn-secondary" (click)="markRead(true)">全部已读</button>
        </ng-container>
      </m-pagination>
    </m-data-table>
  </div>
</div>
